<html>

<head>
    <meta charset="utf-8">
    <title>学习React！！</title>
</head>

<body>
    <div id="app"></div>
    <script src="react/react.js"></script>
    <script src="react/JSXTransformer.js"></script>
	<script type="text/jsx">
		var MessageBox = React.createClass({
			getInitialState:function(){
				return {
					count: 0,
				}
			},
			getDefaultProps:function(){
			},
			// componentWillMount:function(){
			// },
			// componentDidMount:function(){
			// },
			// componentWillUnmount: function(){

			// },
			// 
			shouldComponentUpdate:function(nextProp,nextState){
				console.log('shouldComponentUpdate');
				if(nextState.count > 10) return false;

				return true;
			},
			componentWillUpdate:function(nextProp,nextState){
				console.log('componentWillUpdate');
			},
			componentDidUpdate:function(){
				console.log('componentDidUpdate');
			},
			killMySelf: function(){
				React.unmountComponentAtNode(  document.getElementById('app') );
			},
			doUpdate:function(){
				this.setState({
					count: this.state.count + 1,
				});
			},
			render:function(){	
				console.log('渲染')
				return ( 
					<div>
						<h1 > 计数： {this.state.count}</h1> 
						<button onClick={this.killMySelf}>卸载掉这个组件</button>
						<button onClick={this.doUpdate}>手动更新一下组件（包括子组件）</button>
						<Submessage count={this.state.count}/>
					</div>
				)
			}
		});

		var Submessage = React.createClass({
			componentWillReceiveProps:function(nextProp){
				console.log('子组件将要获得prop');
				
			},
			shouldComponentUpdate:function(nextProp,nextState){
				if(nextProp.count> 5) return false;
				return true;
			},
			render:function(){
				return (
					<h3>当前计数是：{this.props.count}</h3>
				)
			}
		});


		var messageBox = React.render( <MessageBox/>, 
			document.getElementById('app')
		)


	</script>


</body>

</html>